<template>
  <div class="qqcs">
    <div class="group-title">
      <span>URL参数</span>
    </div>
    <editor-table
      ref="urlTable"
      :tableHeader="urlHeader"
      :data="urlData"
    ></editor-table>
    <div class="group-title">
      <span>Header参数</span>
    </div>
    <editor-table
      ref="headTable"
      :tableHeader="headHeader"
      :data="headData"
    ></editor-table>
    <div class="group-title">
      <span>请求参数</span>
    </div>
    <editor-table
      ref="qqscTable"
      :tableHeader="qqcsHeader"
      :data="qqcsData"
    ></editor-table>
  </div>
</template>
<script>
import editorTable from '@/components/editor-table/index.vue'
export default {
  components: { editorTable },
  data () {
    return {
      // url数据
      urlHeader: [
        { label: '参数', prop: 'cs', type: 'input' },
        { label: '值', prop: 'zh', type: 'input' }
      ],
      urlData: [],
      // header数据
      headHeader: [
        { label: '参数', prop: 'cs', type: 'input' },
        { label: '值', prop: 'zh', type: 'input' }
      ],
      headData: [],
      // 请求参数数据
      qqcsHeader: [
        { label: '参数', prop: 'cs', type: 'input' },
        {
          label: '是否必选',
          prop: 'sfbx',
          type: 'select',
          data: [
            { mc: '是', dm: 'Y' },
            { mc: '否', dm: 'N' }
          ]
        },
        {
          label: '类型',
          prop: 'lx',
          type: 'select',
          data: [
            { mc: 'string', dm: 'string' },
            { mc: 'boolean', dm: 'boolean' },
            { mc: 'object', dm: 'object' },
            { mc: 'int', dm: 'int' }
          ]
        },
        { label: '默认值', prop: 'mrz', type: 'input' },
        { label: '说明', prop: 'sm', type: 'input' }
      ],
      qqcsData: [],
      // 父组件传入参数
      form: {}
    }
  },
  watch: {
    // 设置值
    form () {
      this.setData()
    }
  },
  mounted () {
    //
  },
  methods: {
    /* 设置值 */
    setData () {
      this.urlData = this.form.urlcs ? JSON.parse(this.form.urlcs) : []
      this.headData = this.form.headercs ? JSON.parse(this.form.headercs) : []
      this.qqcsData = this.form.qqcs ? JSON.parse(this.form.qqcs) : []
    },
    /*
     * 验证信息
     */
    validateForm () {
      return new Promise((resolve, reject) => {
        const obj = {
          urlcs: JSON.stringify(this.$refs.urlTable.tableData),
          headercs: JSON.stringify(this.$refs.headTable.tableData),
          qqcs: JSON.stringify(this.$refs.qqscTable.tableData)
        }
        resolve(obj)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.qqcs {
  width: 100%;
  margin-top: 20px;
}
</style>
